<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- Mark Of The Web- see http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/overview/motw.asp for info why this is here -->
<!-- saved from url=(0024)http://www.microsoft.com/ -->
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>WPF/E QuickStart: sample controls</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<script type='text/javascript' src='samples/aghost.js'></script>
</head>

<body>
<div class="header-section">
<table>
  <tr>
  <td><img src="images/notebook_plain.png" /></td><td><h1>sample controls</h1></td>
  </tr>
</table>
</div>
<a class="showtoclink" href="controls-frames.html">show toc</a>
<div class="intro-section">
<p>This document contains several examples that show how to use WPF/E to create interactive controls. </p>
<p>This document contains the following sections.</p>
<ul>
<li><a href="#hyperlinkexample">hyperlink example</a></li>
<li><a href="#buttonexample">button example</a></li>
<li><a href="#sliderexample">slider example</a></li>
</ul>

</div>

<div class="section">
<a name="hyperlinkexample"></a>
<h3>hyperlink example</h3>
<p>The following example creates a hyperlink from a <span class="api-name">TextBlock</span> and a
<span class="api-name">Line</span>.</p>


<p class='hyperlink-block'><span class='hyperlink-blockA' id='xaml0_hyperlink' onclick="toggleCode('xaml0','XAML')">[hide XAML]</span></p>
<!-- Inserting sample for controls-hyperlink.xaml-->
<pre id='xaml0' class='xaml'><span class='code-blue'>&lt;</span><span class='code-brown'>Canvas</span> <span class='code-red'>Width</span><span class='code-blue'>=</span><span class='code-blue'>"300"</span> <span class='code-red'>Height</span><span class='code-blue'>=</span><span class='code-blue'>"300"</span>
   <span class='code-red'>xmlns</span><span class='code-blue'>=</span><span class='code-blue'>"http://schemas.microsoft.com/client/2007"</span>
   <span class='code-red'>xmlns:x</span><span class='code-blue'>=</span><span class='code-blue'>"http://schemas.microsoft.com/winfx/2006/xaml"</span><span class='code-blue'>&gt;</span>
  
<strong>  <span class='code-blue'>&lt;!--</span><span class='code-green'> Hyperlink </span><span class='code-blue'>--&gt;</span>
  <span class='code-blue'>&lt;</span><span class='code-brown'>Canvas</span> <span class='code-red'>Width</span><span class='code-blue'>=</span><span class='code-blue'>"90"</span> <span class='code-red'>Height</span><span class='code-blue'>=</span><span class='code-blue'>"30"</span> <span class='code-red'>Canvas.Left</span><span class='code-blue'>=</span><span class='code-blue'>"20"</span> <span class='code-red'>Canvas.Top</span><span class='code-blue'>=</span><span class='code-blue'>"20"</span>
     <span class='code-red'>Background</span><span class='code-blue'>=</span><span class='code-blue'>"transparent"</span>
     <span class='code-red'>Cursor</span><span class='code-blue'>=</span><span class='code-blue'>"Hand"</span>
     <span class='code-red'>MouseEnter</span><span class='code-blue'>=</span><span class='code-blue'>"javascript:hyperlink_MouseEnter"</span>
     <span class='code-red'>MouseLeave</span><span class='code-blue'>=</span><span class='code-blue'>"javascript:hyperlink_MouseLeave"</span>
     <span class='code-red'>MouseLeftButtonDown</span><span class='code-blue'>=</span><span class='code-blue'>"javascript:hyperlink_MouseLeftButtonDown"</span><span class='code-blue'>&gt;</span>
    <span class='code-blue'>&lt;</span><span class='code-brown'>TextBlock</span> <span class='code-red'>Text</span><span class='code-blue'>=</span><span class='code-blue'>"hyperlink"</span> <span class='code-red'>Foreground</span><span class='code-blue'>=</span><span class='code-blue'>"Blue"</span><span class='code-blue'>/&gt;</span>
    <span class='code-blue'>&lt;</span><span class='code-brown'>Line</span> <span class='code-red'>Stroke</span><span class='code-blue'>=</span><span class='code-blue'>"blue"</span> <span class='code-red'>StrokeThickness</span><span class='code-blue'>=</span><span class='code-blue'>"1"</span> <span class='code-red'>X1</span><span class='code-blue'>=</span><span class='code-blue'>"0"</span> <span class='code-red'>Y1</span><span class='code-blue'>=</span><span class='code-blue'>"20"</span> <span class='code-red'>X2</span><span class='code-blue'>=</span><span class='code-blue'>"65"</span> <span class='code-red'>Y2</span><span class='code-blue'>=</span><span class='code-blue'>"20"</span>
       <span class='code-red'>x:Name</span><span class='code-blue'>=</span><span class='code-blue'>"hyperlink_line"</span> <span class='code-red'>Opacity</span><span class='code-blue'>=</span><span class='code-blue'>"0"</span><span class='code-blue'>/&gt;</span>
  <span class='code-blue'>&lt;/</span><span class='code-brown'>Canvas</span><span class='code-blue'>&gt;</span>
</strong><span class='code-blue'>&lt;/</span><span class='code-brown'>Canvas</span><span class='code-blue'>&gt;</span>
</pre>


<p class='hyperlink-block'><span class='hyperlink-blockA' id='js0_hyperlink' onclick="toggleCode('js0','JavaScript')">[hide JavaScript]</span></p>
<script type='text/javascript' src='samples/controls-hyperlink.js'></script>
<!-- Inserting sample for samples/controls-hyperlink.js-->
<pre id='js0' class='xaml'><span class='code-blue'>function</span> <span class='code-black'>hyperlink_MouseLeftButtonDown</span><span class='code-black'>(</span><span class='code-black'>sender</span><span class='code-black'>,</span> <span class='code-black'>args</span><span class='code-black'>)</span> <span class='code-black'>{</span>
    <span class='code-black'>window</span><span class='code-black'>.</span><span class='code-black'>location</span> <span class='code-black'>=</span> <span class='code-red'>"about-frames.html"</span><span class='code-black'>;</span>
<span class='code-black'>}</span>

<span class='code-blue'>function</span> <span class='code-black'>hyperlink_MouseEnter</span><span class='code-black'>(</span><span class='code-black'>sender</span><span class='code-black'>,</span><span class='code-black'>args</span><span class='code-black'>)</span>
<span class='code-black'>{</span>
    <span class='code-black'>sender</span><span class='code-black'>.</span><span class='code-black'>findName</span><span class='code-black'>(</span><span class='code-red'>"hyperlink_line"</span><span class='code-black'>)</span><span class='code-black'>.</span><span class='code-black'>opacity</span> <span class='code-black'>=</span> <span class='code-black'>1</span><span class='code-black'>;</span>
<span class='code-black'>}</span>

<span class='code-blue'>function</span> <span class='code-black'>hyperlink_MouseLeave</span><span class='code-black'>(</span><span class='code-black'>sender</span><span class='code-black'>,</span><span class='code-black'>args</span><span class='code-black'>)</span>
<span class='code-black'>{</span>
    <span class='code-black'>sender</span><span class='code-black'>.</span><span class='code-black'>findName</span><span class='code-black'>(</span><span class='code-red'>"hyperlink_line"</span><span class='code-black'>)</span><span class='code-black'>.</span><span class='code-black'>opacity</span> <span class='code-black'>=</span> <span class='code-black'>0</span><span class='code-black'>;</span>
<span class='code-black'>}</span>
</pre>


    <p class="hyperlink-block">

      <span class='hyperlink-blockA' id='ag0_hyperlink' onclick="toggle_ag0()"> [hide]</span>
      <span class='hyperlink-blockA' id='ag0_restart' onclick="restart_ag0();"> [restart]</span>
    </p>

        <!-- Where the ag ActiveX control will go-->
	    <div class="agHost" id="ag0Host">
    </div>

    <script type="text/javascript">
    var ag0visible = !(true);

    function toggle_ag0() {
        var text = "preview";
        if (ag0visible) {
            ag0visible = false;

            var element = document.getElementById("ag0Host");
            element.style.display = "none";
			element = document.getElementById("ag0_restart");
            element.style.display = "none";


            document.getElementById("ag0_hyperlink").innerHTML = "[show "+ text + "]";
        } else {
            new agHost(
                "ag0Host", // hostElementID (HTML element to put WPF/E
                                    // ActiveX control inside of -- usually a <div>)
	            "ag0", // ID of the WPF/E ActiveX control we create
	            "300px", // width
	            "300px", // height
	            "#00000000", //backgroundcolor
	            null, // SourceElement (name of script tag containing xaml)
	            "samples/controls-hyperlink.xaml", //source file
	            "true", // IsWindowless
	        	"30",  // MaxFrameRate
	            null // OnError handler (method name -- no quotes)
	        );
            var element = document.getElementById("ag0Host");
            element.style.display = "";
            ag0visible = true;
			element = document.getElementById("ag0_restart");
            element.style.display = "";
            document.getElementById("ag0_hyperlink").innerHTML = "[hide "+ text + "]";
	    }
        if (window.event) {
            // cancel navigation
	        window.event.returnValue = false;
	    }
    }


    function restart_ag0() {

	            new agHost(
	                "ag0Host", // hostElementID (HTML element to put WPF/E
	                                    // ActiveX control inside of -- usually a <div>)
		            "ag0", // ID of the WPF/E ActiveX control we create
		            "300px", // width
		            "300px", // height
		            "#00000000", //backgroundcolor
		            null, // SourceElement (name of script tag containing xaml)
		            "samples/controls-hyperlink.xaml", //source file
		            "true", // IsWindowless
		            "30",  // MaxFrameRate
		            null // OnError handler (method name -- no quotes)
		        );

	            ag0visible = true;


	        if (window.event) {
	            // cancel navigation
		        window.event.returnValue = false;
		    }
    }

    toggle_ag0();
    </script>

</div>

<div class="section">
<a name="buttonexample"></a>
<h3>button example</h3>
<p>The following example creates a button from two <span class="api-name">
Rectangle</span> elements and a <span class="api-name">TextBlock</span>.</p>


<p class='hyperlink-block'><span class='hyperlink-blockA' id='xaml1_hyperlink' onclick="toggleCode('xaml1','XAML')">[hide XAML]</span></p>
<!-- Inserting sample for controls-button.xaml-->
<pre id='xaml1' class='xaml'><span class='code-blue'>&lt;</span><span class='code-brown'>Canvas</span> <span class='code-red'>Width</span><span class='code-blue'>=</span><span class='code-blue'>"300"</span> <span class='code-red'>Height</span><span class='code-blue'>=</span><span class='code-blue'>"300"</span>
    <span class='code-red'>xmlns</span><span class='code-blue'>=</span><span class='code-blue'>"http://schemas.microsoft.com/client/2007"</span>
    <span class='code-red'>xmlns:x</span><span class='code-blue'>=</span><span class='code-blue'>"http://schemas.microsoft.com/winfx/2006/xaml"</span><span class='code-blue'>&gt;</span>
<strong>  <span class='code-blue'>&lt;!--</span><span class='code-green'> Button </span><span class='code-blue'>--&gt;</span>
  <span class='code-blue'>&lt;</span><span class='code-brown'>Canvas</span>
      <span class='code-red'>x:Name</span><span class='code-blue'>=</span><span class='code-blue'>"button"</span>
      <span class='code-red'>Canvas.Top</span><span class='code-blue'>=</span><span class='code-blue'>"10"</span> <span class='code-red'>Canvas.Left</span><span class='code-blue'>=</span><span class='code-blue'>"20"</span>
      <span class='code-red'>MouseLeftButtonDown</span><span class='code-blue'>=</span><span class='code-blue'>"javascript:button_MouseLeftButtonDown"</span>
      <span class='code-red'>MouseLeftButtonUp</span><span class='code-blue'>=</span><span class='code-blue'>"javascript:button_MouseLeftButtonUp"</span>
      <span class='code-red'>MouseEnter</span><span class='code-blue'>=</span><span class='code-blue'>"javascript:button_MouseEnter"</span>
      <span class='code-red'>MouseLeave</span><span class='code-blue'>=</span><span class='code-blue'>"javascript:button_MouseLeave"</span><span class='code-blue'>&gt;</span>
    <span class='code-blue'>&lt;</span><span class='code-brown'>Canvas.RenderTransform</span><span class='code-blue'>&gt;</span>
      <span class='code-blue'>&lt;</span><span class='code-brown'>TransformGroup</span><span class='code-blue'>&gt;</span>
        <span class='code-blue'>&lt;</span><span class='code-brown'>TranslateTransform</span> <span class='code-red'>x:Name</span><span class='code-blue'>=</span><span class='code-blue'>"button_transform"</span> <span class='code-red'>X</span><span class='code-blue'>=</span><span class='code-blue'>"0"</span> <span class='code-red'>Y</span><span class='code-blue'>=</span><span class='code-blue'>"0"</span><span class='code-blue'>/&gt;</span>
      <span class='code-blue'>&lt;/</span><span class='code-brown'>TransformGroup</span><span class='code-blue'>&gt;</span>
    <span class='code-blue'>&lt;/</span><span class='code-brown'>Canvas.RenderTransform</span><span class='code-blue'>&gt;</span>
    <span class='code-blue'>&lt;</span><span class='code-brown'>Rectangle</span> <span class='code-red'>Stroke</span><span class='code-blue'>=</span><span class='code-blue'>"#FF000000"</span> <span class='code-red'>Fill</span><span class='code-blue'>=</span><span class='code-blue'>"sc#1, 0.8123474, 0.8123474, 0.8123474"</span>
        <span class='code-red'>Width</span><span class='code-blue'>=</span><span class='code-blue'>"128.8"</span> <span class='code-red'>Height</span><span class='code-blue'>=</span><span class='code-blue'>"56"</span> <span class='code-red'>x:Name</span><span class='code-blue'>=</span><span class='code-blue'>"button_rectangle"</span><span class='code-blue'>/&gt;</span>
    <span class='code-blue'>&lt;</span><span class='code-brown'>Rectangle</span> <span class='code-red'>Stroke</span><span class='code-blue'>=</span><span class='code-blue'>"sc#1, 0.912730157, 0.37122494, 0.17111966"</span> <span class='code-red'>StrokeThickness</span><span class='code-blue'>=</span><span class='code-blue'>"5"</span>
        <span class='code-red'>Width</span><span class='code-blue'>=</span><span class='code-blue'>"126.8"</span> <span class='code-red'>Height</span><span class='code-blue'>=</span><span class='code-blue'>"54"</span> <span class='code-red'>Canvas.Left</span><span class='code-blue'>=</span><span class='code-blue'>"1"</span> <span class='code-red'>Canvas.Top</span><span class='code-blue'>=</span><span class='code-blue'>"1"</span>
        <span class='code-red'>Opacity</span><span class='code-blue'>=</span><span class='code-blue'>"0"</span>
        <span class='code-red'>x:Name</span><span class='code-blue'>=</span><span class='code-blue'>"button_highlight"</span><span class='code-blue'>/&gt;</span>
    <span class='code-blue'>&lt;</span><span class='code-brown'>TextBlock</span> <span class='code-red'>Text</span><span class='code-blue'>=</span><span class='code-blue'>"Press me!"</span> <span class='code-red'>FontSize</span><span class='code-blue'>=</span><span class='code-blue'>"20"</span> <span class='code-red'>Canvas.Left</span><span class='code-blue'>=</span><span class='code-blue'>"22"</span> <span class='code-red'>Canvas.Top</span><span class='code-blue'>=</span><span class='code-blue'>"12"</span><span class='code-blue'>/&gt;</span>
  <span class='code-blue'>&lt;/</span><span class='code-brown'>Canvas</span><span class='code-blue'>&gt;</span>
</strong><span class='code-blue'>&lt;/</span><span class='code-brown'>Canvas</span><span class='code-blue'>&gt;</span>
</pre>


<p class='hyperlink-block'><span class='hyperlink-blockA' id='js1_hyperlink' onclick="toggleCode('js1','JavaScript')">[hide JavaScript]</span></p>
<script type='text/javascript' src='samples/controls-button.js'></script>
<!-- Inserting sample for samples/controls-button.js-->
<pre id='js1' class='xaml'><span class='code-blue'>var</span> <span class='code-black'>mouseOver</span> <span class='code-black'>=</span> <span class='code-black'>false</span><span class='code-black'>;</span>
<span class='code-blue'>var</span> <span class='code-black'>pressed</span> <span class='code-black'>=</span> <span class='code-black'>false</span><span class='code-black'>;</span>

<span class='code-blue'>function</span> <span class='code-black'>button_MouseLeftButtonDown</span><span class='code-black'>(</span><span class='code-black'>sender</span><span class='code-black'>,</span><span class='code-black'>args</span><span class='code-black'>)</span> <span class='code-black'>{</span>
    <span class='code-black'>sender</span><span class='code-black'>.</span><span class='code-black'>captureMouse</span><span class='code-black'>(</span><span class='code-black'>)</span><span class='code-black'>;</span>
    <span class='code-black'>mouseOver</span> <span class='code-black'>=</span> <span class='code-black'>true</span><span class='code-black'>;</span>
    <span class='code-black'>pressed</span> <span class='code-black'>=</span> <span class='code-black'>true</span><span class='code-black'>;</span>
    <span class='code-black'>updateVisuals</span><span class='code-black'>(</span><span class='code-black'>sender</span><span class='code-black'>)</span><span class='code-black'>;</span>
<span class='code-black'>}</span>

<span class='code-blue'>function</span> <span class='code-black'>button_MouseLeftButtonUp</span><span class='code-black'>(</span><span class='code-black'>sender</span><span class='code-black'>,</span><span class='code-black'>args</span><span class='code-black'>)</span> <span class='code-black'>{</span>
    <span class='code-black'>sender</span><span class='code-black'>.</span><span class='code-black'>releaseMouseCapture</span><span class='code-black'>(</span><span class='code-black'>)</span><span class='code-black'>;</span>
    <span class='code-black'>pressed</span> <span class='code-black'>=</span> <span class='code-black'>false</span><span class='code-black'>;</span>
    
    <span class='code-black'>updateVisuals</span><span class='code-black'>(</span><span class='code-black'>sender</span><span class='code-black'>)</span><span class='code-black'>;</span>
    
    <span class='code-black'>if</span> <span class='code-black'>(</span><span class='code-black'>mouseOver</span><span class='code-black'>)</span> <span class='code-black'>{</span>
        <span class='code-black'>alert</span><span class='code-black'>(</span><span class='code-red'>"you pressed the button!"</span><span class='code-black'>)</span><span class='code-black'>;</span>
    <span class='code-black'>}</span>
<span class='code-black'>}</span>

<span class='code-blue'>function</span> <span class='code-black'>button_MouseEnter</span><span class='code-black'>(</span><span class='code-black'>sender</span><span class='code-black'>,</span><span class='code-black'>args</span><span class='code-black'>)</span> <span class='code-black'>{</span>
    <span class='code-black'>mouseOver</span> <span class='code-black'>=</span> <span class='code-black'>true</span><span class='code-black'>;</span>
    <span class='code-black'>updateVisuals</span><span class='code-black'>(</span><span class='code-black'>sender</span><span class='code-black'>)</span><span class='code-black'>;</span>
<span class='code-black'>}</span>

<span class='code-blue'>function</span> <span class='code-black'>button_MouseLeave</span><span class='code-black'>(</span><span class='code-black'>sender</span><span class='code-black'>,</span><span class='code-black'>args</span><span class='code-black'>)</span> <span class='code-black'>{</span>
    <span class='code-black'>mouseOver</span> <span class='code-black'>=</span> <span class='code-black'>false</span><span class='code-black'>;</span>
    <span class='code-black'>updateVisuals</span><span class='code-black'>(</span><span class='code-black'>sender</span><span class='code-black'>)</span><span class='code-black'>;</span>
<span class='code-black'>}</span>

<span class='code-blue'>function</span> <span class='code-black'>updateVisuals</span><span class='code-black'>(</span><span class='code-black'>sender</span><span class='code-black'>)</span> <span class='code-black'>{</span>
    <span class='code-green'>//background</span>
    <span class='code-black'>if</span> <span class='code-black'>(</span><span class='code-black'>pressed</span> <span class='code-black'>&amp;</span><span class='code-black'>&amp;</span> <span class='code-black'>mouseOver</span><span class='code-black'>)</span> <span class='code-black'>{</span>
        <span class='code-black'>sender</span><span class='code-black'>.</span><span class='code-black'>findName</span><span class='code-black'>(</span><span class='code-red'>"button_rectangle"</span><span class='code-black'>)</span><span class='code-black'>.</span><span class='code-black'>fill</span> <span class='code-black'>=</span> <span class='code-red'>"sc#1, 0.548430264, 0.5354195, 0.5354195"</span><span class='code-black'>;</span>
        <span class='code-blue'>var</span> <span class='code-black'>transform</span> <span class='code-black'>=</span> <span class='code-black'>sender</span><span class='code-black'>.</span><span class='code-black'>findName</span><span class='code-black'>(</span><span class='code-red'>"button_transform"</span><span class='code-black'>)</span><span class='code-black'>;</span>
        <span class='code-black'>transform</span><span class='code-black'>.</span><span class='code-black'>x</span> <span class='code-black'>=</span> <span class='code-black'>2</span><span class='code-black'>;</span>
        <span class='code-black'>transform</span><span class='code-black'>.</span><span class='code-black'>y</span> <span class='code-black'>=</span> <span class='code-black'>2</span><span class='code-black'>;</span>
    <span class='code-black'>}</span> <span class='code-black'>else</span> <span class='code-black'>{</span>
        <span class='code-black'>sender</span><span class='code-black'>.</span><span class='code-black'>findName</span><span class='code-black'>(</span><span class='code-red'>"button_rectangle"</span><span class='code-black'>)</span><span class='code-black'>.</span><span class='code-black'>fill</span> <span class='code-black'>=</span> <span class='code-red'>"sc#1, 0.8123474, 0.8123474, 0.8123474"</span><span class='code-black'>;</span>
        <span class='code-blue'>var</span> <span class='code-black'>transform</span> <span class='code-black'>=</span> <span class='code-black'>sender</span><span class='code-black'>.</span><span class='code-black'>findName</span><span class='code-black'>(</span><span class='code-red'>"button_transform"</span><span class='code-black'>)</span><span class='code-black'>;</span>
        <span class='code-black'>transform</span><span class='code-black'>.</span><span class='code-black'>x</span> <span class='code-black'>=</span> <span class='code-black'>0</span><span class='code-black'>;</span>
        <span class='code-black'>transform</span><span class='code-black'>.</span><span class='code-black'>y</span> <span class='code-black'>=</span> <span class='code-black'>0</span><span class='code-black'>;</span>
    <span class='code-black'>}</span>
    
    <span class='code-green'>// highlight</span>
    <span class='code-black'>if</span> <span class='code-black'>(</span><span class='code-black'>mouseOver</span> <span class='code-black'>|</span><span class='code-black'>|</span> <span class='code-black'>pressed</span><span class='code-black'>)</span> <span class='code-black'>{</span>
        <span class='code-black'>sender</span><span class='code-black'>.</span><span class='code-black'>findName</span><span class='code-black'>(</span><span class='code-red'>"button_highlight"</span><span class='code-black'>)</span><span class='code-black'>.</span><span class='code-black'>opacity</span> <span class='code-black'>=</span> <span class='code-black'>1</span><span class='code-black'>;</span>
    <span class='code-black'>}</span> <span class='code-black'>else</span> <span class='code-black'>{</span>
        <span class='code-black'>sender</span><span class='code-black'>.</span><span class='code-black'>findName</span><span class='code-black'>(</span><span class='code-red'>"button_highlight"</span><span class='code-black'>)</span><span class='code-black'>.</span><span class='code-black'>opacity</span> <span class='code-black'>=</span> <span class='code-black'>0</span><span class='code-black'>;</span>
    <span class='code-black'>}</span>
<span class='code-black'>}</span>
</pre>


    <p class="hyperlink-block">

      <span class='hyperlink-blockA' id='ag1_hyperlink' onclick="toggle_ag1()"> [hide]</span>
      <span class='hyperlink-blockA' id='ag1_restart' onclick="restart_ag1();"> [restart]</span>
    </p>

        <!-- Where the ag ActiveX control will go-->
	    <div class="agHost" id="ag1Host">
    </div>

    <script type="text/javascript">
    var ag1visible = !(true);

    function toggle_ag1() {
        var text = "preview";
        if (ag1visible) {
            ag1visible = false;

            var element = document.getElementById("ag1Host");
            element.style.display = "none";
			element = document.getElementById("ag1_restart");
            element.style.display = "none";


            document.getElementById("ag1_hyperlink").innerHTML = "[show "+ text + "]";
        } else {
            new agHost(
                "ag1Host", // hostElementID (HTML element to put WPF/E
                                    // ActiveX control inside of -- usually a <div>)
	            "ag1", // ID of the WPF/E ActiveX control we create
	            "300px", // width
	            "300px", // height
	            "#00000000", //backgroundcolor
	            null, // SourceElement (name of script tag containing xaml)
	            "samples/controls-button.xaml", //source file
	            "true", // IsWindowless
	        	"30",  // MaxFrameRate
	            null // OnError handler (method name -- no quotes)
	        );
            var element = document.getElementById("ag1Host");
            element.style.display = "";
            ag1visible = true;
			element = document.getElementById("ag1_restart");
            element.style.display = "";
            document.getElementById("ag1_hyperlink").innerHTML = "[hide "+ text + "]";
	    }
        if (window.event) {
            // cancel navigation
	        window.event.returnValue = false;
	    }
    }


    function restart_ag1() {

	            new agHost(
	                "ag1Host", // hostElementID (HTML element to put WPF/E
	                                    // ActiveX control inside of -- usually a <div>)
		            "ag1", // ID of the WPF/E ActiveX control we create
		            "300px", // width
		            "300px", // height
		            "#00000000", //backgroundcolor
		            null, // SourceElement (name of script tag containing xaml)
		            "samples/controls-button.xaml", //source file
		            "true", // IsWindowless
		            "30",  // MaxFrameRate
		            null // OnError handler (method name -- no quotes)
		        );

	            ag1visible = true;


	        if (window.event) {
	            // cancel navigation
		        window.event.returnValue = false;
		    }
    }

    toggle_ag1();
    </script>


<div class="section">
<a name="sliderexample"></a>
<h3>slider example</h3>
<p>The following example creates a slider from a <span class="api-name">Line</span> and a
<span class="api-name">Path</span>.</p>


<p class='hyperlink-block'><span class='hyperlink-blockA' id='xaml2_hyperlink' onclick="toggleCode('xaml2','XAML')">[hide XAML]</span></p>
<!-- Inserting sample for controls-slider.xaml-->
<pre id='xaml2' class='xaml'><span class='code-blue'>&lt;</span><span class='code-brown'>Canvas</span> <span class='code-red'>Width</span><span class='code-blue'>=</span><span class='code-blue'>"300"</span> <span class='code-red'>Height</span><span class='code-blue'>=</span><span class='code-blue'>"300"</span>
   <span class='code-red'>xmlns</span><span class='code-blue'>=</span><span class='code-blue'>"http://schemas.microsoft.com/client/2007"</span>
   <span class='code-red'>xmlns:x</span><span class='code-blue'>=</span><span class='code-blue'>"http://schemas.microsoft.com/winfx/2006/xaml"</span>
   <span class='code-red'>Loaded</span><span class='code-blue'>=</span><span class='code-blue'>"javascript:slider_Loaded"</span><span class='code-blue'>&gt;</span>
<strong>  <span class='code-blue'>&lt;!--</span><span class='code-green'> Slider </span><span class='code-blue'>--&gt;</span>
  <span class='code-blue'>&lt;</span><span class='code-brown'>Canvas</span> <span class='code-red'>x:Name</span><span class='code-blue'>=</span><span class='code-blue'>"slider"</span> 
     <span class='code-red'>Canvas.Top</span><span class='code-blue'>=</span><span class='code-blue'>"50"</span> <span class='code-red'>Canvas.Left</span><span class='code-blue'>=</span><span class='code-blue'>"20"</span> <span class='code-red'>Width</span><span class='code-blue'>=</span><span class='code-blue'>"200"</span> <span class='code-red'>Height</span><span class='code-blue'>=</span><span class='code-blue'>"45"</span>
     <span class='code-red'>Background</span><span class='code-blue'>=</span><span class='code-blue'>"transparent"</span><span class='code-blue'>&gt;</span>
      
    <span class='code-blue'>&lt;</span><span class='code-brown'>Line</span> <span class='code-red'>x:Name</span><span class='code-blue'>=</span><span class='code-blue'>"slider_line"</span> 
       <span class='code-red'>Stroke</span><span class='code-blue'>=</span><span class='code-blue'>"black"</span> <span class='code-red'>StrokeThickness</span><span class='code-blue'>=</span><span class='code-blue'>"1"</span> 
       <span class='code-red'>X1</span><span class='code-blue'>=</span><span class='code-blue'>"0"</span> <span class='code-red'>Y1</span><span class='code-blue'>=</span><span class='code-blue'>"25"</span> <span class='code-red'>X2</span><span class='code-blue'>=</span><span class='code-blue'>"200"</span> <span class='code-red'>Y2</span><span class='code-blue'>=</span><span class='code-blue'>"25"</span> <span class='code-blue'>/&gt;</span>

    <span class='code-blue'>&lt;</span><span class='code-brown'>Rectangle</span> 
       <span class='code-red'>Fill</span><span class='code-blue'>=</span><span class='code-blue'>"Transparent"</span> 
       <span class='code-red'>Width</span><span class='code-blue'>=</span><span class='code-blue'>"200"</span> <span class='code-red'>Height</span><span class='code-blue'>=</span><span class='code-blue'>"45"</span> 
       <span class='code-red'>MouseLeftButtonDown</span><span class='code-blue'>=</span><span class='code-blue'>"javascript:slider_MouseLeftButtonDown"</span> <span class='code-blue'>/&gt;</span>        
        
    <span class='code-blue'>&lt;</span><span class='code-brown'>Path</span> <span class='code-red'>x:Name</span><span class='code-blue'>=</span><span class='code-blue'>"slider_thumb"</span>  <span class='code-red'>Stroke</span><span class='code-blue'>=</span><span class='code-blue'>"#FF000000"</span> 
       <span class='code-red'>Fill</span><span class='code-blue'>=</span><span class='code-blue'>"sc#1, 0.548430264, 0.5354195, 0.5354195"</span>
       <span class='code-red'>Data</span><span class='code-blue'>=</span><span class='code-blue'>"M0,0 L11.5,0 11.5,30 5.75,40 0,30z"</span>
       <span class='code-red'>MouseLeftButtonUp</span><span class='code-blue'>=</span><span class='code-blue'>"javascript:slider_thumb_MouseLeftButtonUp"</span>
       <span class='code-red'>MouseMove</span><span class='code-blue'>=</span><span class='code-blue'>"javascript:slider_thumb_MouseMove"</span>
       <span class='code-red'>MouseLeftButtonDown</span><span class='code-blue'>=</span><span class='code-blue'>"javascript:slider_thumb_MouseLeftButtonDown"</span> <span class='code-blue'>/&gt;</span>
  <span class='code-blue'>&lt;/</span><span class='code-brown'>Canvas</span><span class='code-blue'>&gt;</span>
</strong><span class='code-blue'>&lt;/</span><span class='code-brown'>Canvas</span><span class='code-blue'>&gt;</span>
</pre>


<p class='hyperlink-block'><span class='hyperlink-blockA' id='js2_hyperlink' onclick="toggleCode('js2','JavaScript')">[hide JavaScript]</span></p>
<script type='text/javascript' src='samples/controls-slider.js'></script>
<!-- Inserting sample for samples/controls-slider.js-->
<pre id='js2' class='xaml'><span class='code-blue'>var</span> <span class='code-black'>mouseDownPosition</span> <span class='code-black'>=</span> <span class='code-black'>0</span><span class='code-black'>;</span>
<span class='code-blue'>var</span> <span class='code-black'>mouseDownValue</span> <span class='code-black'>=</span> <span class='code-black'>-</span><span class='code-black'>1</span><span class='code-black'>;</span>
<span class='code-blue'>var</span> <span class='code-black'>thumbCenter</span> <span class='code-black'>=</span> <span class='code-black'>5</span><span class='code-black'>.</span><span class='code-black'>75</span><span class='code-black'>;</span>

<span class='code-blue'>function</span> <span class='code-black'>slider_Loaded</span><span class='code-black'>(</span><span class='code-black'>sender</span><span class='code-black'>,</span> <span class='code-black'>args</span><span class='code-black'>)</span> <span class='code-black'>{</span>
    <span class='code-black'>slider_SetValue</span><span class='code-black'>(</span><span class='code-black'>sender</span><span class='code-black'>,</span> <span class='code-black'>0</span><span class='code-black'>)</span><span class='code-black'>;</span>
<span class='code-black'>}</span>

<span class='code-blue'>function</span> <span class='code-black'>slider_MouseLeftButtonDown</span><span class='code-black'>(</span><span class='code-black'>sender</span><span class='code-black'>,</span> <span class='code-black'>args</span><span class='code-black'>)</span> <span class='code-black'>{</span>
    
    <span class='code-blue'>var</span> <span class='code-black'>coordinate</span> <span class='code-black'>=</span> <span class='code-black'>args</span><span class='code-black'>.</span><span class='code-black'>x</span><span class='code-black'>;</span>
    <span class='code-blue'>var</span> <span class='code-black'>slider</span> <span class='code-black'>=</span> <span class='code-black'>sender</span><span class='code-black'>.</span><span class='code-black'>FindName</span><span class='code-black'>(</span><span class='code-red'>"slider"</span><span class='code-black'>)</span><span class='code-black'>;</span>
    <span class='code-black'>coordinate</span> <span class='code-black'>-</span><span class='code-black'>=</span> <span class='code-black'>slider</span><span class='code-black'>[</span><span class='code-red'>"Canvas.Left"</span><span class='code-black'>]</span><span class='code-black'>;</span>
    <span class='code-black'>slider_SetValue</span><span class='code-black'>(</span><span class='code-black'>slider</span><span class='code-black'>,</span> <span class='code-black'>coordinate</span> <span class='code-black'>-</span> <span class='code-black'>thumbCenter</span><span class='code-black'>)</span><span class='code-black'>;</span>  
<span class='code-black'>}</span>

<span class='code-blue'>function</span> <span class='code-black'>slider_thumb_MouseLeftButtonDown</span><span class='code-black'>(</span><span class='code-black'>sender</span><span class='code-black'>,</span> <span class='code-black'>args</span><span class='code-black'>)</span> <span class='code-black'>{</span>
    <span class='code-blue'>var</span> <span class='code-black'>slider</span> <span class='code-black'>=</span> <span class='code-black'>sender</span><span class='code-black'>.</span><span class='code-black'>findName</span><span class='code-black'>(</span><span class='code-red'>"slider"</span><span class='code-black'>)</span><span class='code-black'>;</span>
    <span class='code-black'>sender</span><span class='code-black'>.</span><span class='code-black'>captureMouse</span><span class='code-black'>(</span><span class='code-black'>)</span><span class='code-black'>;</span>
    <span class='code-black'>mouseDownValue</span> <span class='code-black'>=</span> <span class='code-black'>slider_GetValue</span><span class='code-black'>(</span><span class='code-black'>slider</span><span class='code-black'>)</span><span class='code-black'>;</span>
    <span class='code-black'>mouseDownPosition</span> <span class='code-black'>=</span> <span class='code-black'>args</span><span class='code-black'>.</span><span class='code-black'>x</span><span class='code-black'>;</span>
<span class='code-black'>}</span>

<span class='code-blue'>function</span> <span class='code-black'>slider_thumb_MouseLeftButtonUp</span><span class='code-black'>(</span><span class='code-black'>sender</span><span class='code-black'>,</span> <span class='code-black'>args</span><span class='code-black'>)</span> <span class='code-black'>{</span>
    <span class='code-blue'>var</span> <span class='code-black'>slider</span> <span class='code-black'>=</span> <span class='code-black'>sender</span><span class='code-black'>.</span><span class='code-black'>findName</span><span class='code-black'>(</span><span class='code-red'>"slider"</span><span class='code-black'>)</span><span class='code-black'>;</span>
    <span class='code-black'>slider</span><span class='code-black'>.</span><span class='code-black'>releaseMouseCapture</span><span class='code-black'>(</span><span class='code-black'>)</span><span class='code-black'>;</span>
    <span class='code-black'>mouseDownValue</span> <span class='code-black'>=</span> <span class='code-black'>-</span><span class='code-black'>1</span><span class='code-black'>;</span>
<span class='code-black'>}</span>

<span class='code-blue'>function</span> <span class='code-black'>slider_thumb_MouseMove</span><span class='code-black'>(</span><span class='code-black'>sender</span><span class='code-black'>,</span> <span class='code-black'>args</span><span class='code-black'>)</span> <span class='code-black'>{</span>
    <span class='code-blue'>var</span> <span class='code-black'>slider</span> <span class='code-black'>=</span> <span class='code-black'>sender</span><span class='code-black'>.</span><span class='code-black'>findName</span><span class='code-black'>(</span><span class='code-red'>"slider"</span><span class='code-black'>)</span><span class='code-black'>;</span>
    <span class='code-black'>if</span> <span class='code-black'>(</span><span class='code-black'>mouseDownValue</span> <span class='code-black'>!</span><span class='code-black'>=</span> <span class='code-black'>-</span><span class='code-black'>1</span><span class='code-black'>)</span> <span class='code-black'>{</span>
        <span class='code-blue'>var</span> <span class='code-black'>newValue</span> <span class='code-black'>=</span> <span class='code-black'>mouseDownValue</span> <span class='code-black'>+</span> <span class='code-black'>(</span><span class='code-black'>args</span><span class='code-black'>.</span><span class='code-black'>x</span> <span class='code-black'>-</span> <span class='code-black'>mouseDownPosition</span><span class='code-black'>)</span><span class='code-black'>;</span>    
        <span class='code-black'>slider_SetValue</span><span class='code-black'>(</span><span class='code-black'>slider</span><span class='code-black'>,</span> <span class='code-black'>newValue</span><span class='code-black'>)</span><span class='code-black'>;</span>
    <span class='code-black'>}</span>   
<span class='code-black'>}</span>

<span class='code-blue'>function</span> <span class='code-black'>slider_GetValue</span><span class='code-black'>(</span><span class='code-black'>sender</span><span class='code-black'>)</span> <span class='code-black'>{</span>
    <span class='code-blue'>var</span> <span class='code-black'>thumb</span> <span class='code-black'>=</span> <span class='code-black'>sender</span><span class='code-black'>.</span><span class='code-black'>findName</span><span class='code-black'>(</span><span class='code-red'>"slider_thumb"</span><span class='code-black'>)</span><span class='code-black'>;</span>
    <span class='code-black'>return</span> <span class='code-black'>thumb</span><span class='code-black'>[</span><span class='code-red'>"Canvas.Left"</span><span class='code-black'>]</span><span class='code-black'>;</span> 
<span class='code-black'>}</span>

<span class='code-blue'>function</span> <span class='code-black'>slider_SetValue</span><span class='code-black'>(</span><span class='code-black'>sender</span><span class='code-black'>,</span> <span class='code-black'>newValue</span><span class='code-black'>)</span> <span class='code-black'>{</span>
    
    <span class='code-black'>if</span> <span class='code-black'>(</span><span class='code-black'>newValue</span> <span class='code-black'>&gt;</span> <span class='code-black'>sender</span><span class='code-black'>.</span><span class='code-black'>width</span> <span class='code-black'>)</span> <span class='code-black'>{</span>
        <span class='code-black'>newValue</span> <span class='code-black'>=</span> <span class='code-black'>sender</span><span class='code-black'>.</span><span class='code-black'>width</span><span class='code-black'>;</span>
        <span class='code-black'>mouseDownValue</span> <span class='code-black'>=</span> <span class='code-black'>-</span><span class='code-black'>1</span><span class='code-black'>;</span>
    <span class='code-black'>}</span>
    <span class='code-black'>if</span> <span class='code-black'>(</span><span class='code-black'>newValue</span> <span class='code-black'>&lt;</span> <span class='code-black'>-</span> <span class='code-black'>thumbCenter</span><span class='code-black'>)</span> <span class='code-black'>{</span>
        <span class='code-black'>newValue</span> <span class='code-black'>=</span> <span class='code-black'>-</span> <span class='code-black'>thumbCenter</span><span class='code-black'>;</span>
        <span class='code-black'>mouseDownValue</span> <span class='code-black'>=</span> <span class='code-black'>-</span><span class='code-black'>1</span><span class='code-black'>;</span>
    <span class='code-black'>}</span>
    <span class='code-blue'>var</span> <span class='code-black'>thumb</span> <span class='code-black'>=</span> <span class='code-black'>sender</span><span class='code-black'>.</span><span class='code-black'>findName</span><span class='code-black'>(</span><span class='code-red'>"slider_thumb"</span><span class='code-black'>)</span><span class='code-black'>;</span>
    
    <span class='code-black'>thumb</span><span class='code-black'>[</span><span class='code-red'>"Canvas.Left"</span><span class='code-black'>]</span> <span class='code-black'>=</span> <span class='code-black'>newValue</span><span class='code-black'>;</span>
<span class='code-black'>}</span>
</pre>


    <p class="hyperlink-block">

      <span class='hyperlink-blockA' id='ag2_hyperlink' onclick="toggle_ag2()"> [hide]</span>
      <span class='hyperlink-blockA' id='ag2_restart' onclick="restart_ag2();"> [restart]</span>
    </p>

        <!-- Where the ag ActiveX control will go-->
	    <div class="agHost" id="ag2Host">
    </div>

    <script type="text/javascript">
    var ag2visible = !(true);

    function toggle_ag2() {
        var text = "preview";
        if (ag2visible) {
            ag2visible = false;

            var element = document.getElementById("ag2Host");
            element.style.display = "none";
			element = document.getElementById("ag2_restart");
            element.style.display = "none";


            document.getElementById("ag2_hyperlink").innerHTML = "[show "+ text + "]";
        } else {
            new agHost(
                "ag2Host", // hostElementID (HTML element to put WPF/E
                                    // ActiveX control inside of -- usually a <div>)
	            "ag2", // ID of the WPF/E ActiveX control we create
	            "300px", // width
	            "300px", // height
	            "#00000000", //backgroundcolor
	            null, // SourceElement (name of script tag containing xaml)
	            "samples/controls-slider.xaml", //source file
	            "true", // IsWindowless
	        	"30",  // MaxFrameRate
	            null // OnError handler (method name -- no quotes)
	        );
            var element = document.getElementById("ag2Host");
            element.style.display = "";
            ag2visible = true;
			element = document.getElementById("ag2_restart");
            element.style.display = "";
            document.getElementById("ag2_hyperlink").innerHTML = "[hide "+ text + "]";
	    }
        if (window.event) {
            // cancel navigation
	        window.event.returnValue = false;
	    }
    }


    function restart_ag2() {

	            new agHost(
	                "ag2Host", // hostElementID (HTML element to put WPF/E
	                                    // ActiveX control inside of -- usually a <div>)
		            "ag2", // ID of the WPF/E ActiveX control we create
		            "300px", // width
		            "300px", // height
		            "#00000000", //backgroundcolor
		            null, // SourceElement (name of script tag containing xaml)
		            "samples/controls-slider.xaml", //source file
		            "true", // IsWindowless
		            "30",  // MaxFrameRate
		            null // OnError handler (method name -- no quotes)
		        );

	            ag2visible = true;


	        if (window.event) {
	            // cancel navigation
		        window.event.returnValue = false;
		    }
    }

    toggle_ag2();
    </script>


<div class="copyright-section">
<p>Copyright © 2007 Microsoft Corporation.
All rights reserved. <a href="http://www.microsoft.com/info/cpyright.htm" target="new">Legal Notices</a>.</p>
</div>

    <script type="text/javascript">
    var visibility = new Object();
    for (var i=0; i != 3; i++) {
        visibility["xaml"+i] = true;
        visibility["js"+i] = true;
        visibility["cs"+i] = true;
    }
            
    function toggleCode(id, text) {
        if (visibility[id]) {
            visibility[id] = false;
            document.getElementById(id).style.display = "none";
            document.getElementById(id+ "_hyperlink").innerHTML = "[show "+ text + "]";
        } else {
            visibility[id] = true;
            document.getElementById(id).style.display = "";
            document.getElementById(id+ "_hyperlink").innerHTML = "[hide "+ text + "]";
        }
        window.event.returnValue = false;
    }
    </script>
</body>

</html>
